<template>
  <div class="relative">
    <div class="environment-header">
      <zz-back class="left" name="视频监控" :title=departmentname style="padding: 0"></zz-back>
      <div class="head-right">
        <span class="mr10">项目</span>
        <zz-search
          class="inline mr20"
          :width="155"
          :searchTop="4"
          @searchClick="searchClick">
        </zz-search>
      </div>
    </div>
    <div class="top-right right">
      <zz-check
        :check = false
        class="grid"
        fontSize="12px"
        @handleChange="handleChange"
        style="vertical-align: text-top"
        checkTip="只查看有智能抓拍的项目">
      </zz-check>
      <zz-select
        class="inline"
        style="width: 162px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList"
        :all = false
        optionColor = "#939997"
        name = "按摄像头数量升序"
        @optionClick="changeSortFun">
      </zz-select>
    </div>
    <div class="info mr20">
      <div>接入视频监控项目<span>{{videoCount.hasAi}}</span>个</div>
      <div>未接入的项目<span>{{videoCount.noAi}}</span>个</div>
      <button @click="notAiList" class="button-line detail-btn">查看详情</button>
    </div>
    <!-- <zz-table
      style="margin: 10px auto 0; width: 100%;"
      :title="title"
      :dataList = 'dataList'
      @handle="tableHandler">
    </zz-table> -->
    <div class="mainsec">
      <table class="main-table">
        <tr>
          <th>区域名称</th>
          <th>项目名称</th>
          <th>摄像头数量</th>
          <th>预警抓拍记录</th>
          <th>报警抓拍记录</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in dataList" v-if="dataList && dataList.length > 0">
          <td>{{item.areaName}}</td>
          <td>{{item.projectName}}
            <i class="iconfont icon-jiankong right" v-if="item.isProjectHaveAi"></i>
          </td>
          <td class="alignRight">{{item.videoNum && item.videoNum != 0 ? item.videoNum : '--' }}</td>
          <td class="alignRight">{{item.earlyAlarmNum && item.earlyAlarmNum != 0 ? item.earlyAlarmNum : '--' }}</td>
          <td class="alignRight">{{item.alarmNum && item.alarmNum != 0 ? item.alarmNum : '--' }}</td>
          <td @click="tableHandler(item)" class="detail pointer">查看详情</td>
        </tr>
        <tr class="nodate" v-if="!dataList || dataList.length === 0">
          <td colspan="8"><i class="iconfont icon-warning"></i>暂无数据</td>
        </tr>
      </table>
    </div>
    <zz-paginate pagingId="page1" v-if="dataList.length > 0" :simple="false" :isTotalItem="false"  @choose="query" :pageSize = pageNum :padding="[0]" class="right mr20"></zz-paginate>
    <div class="exportExcel">
      <button class="mr10 button-block ml20" @click="exportExcel()">导出Excel</button>
      <div>上述每小时统计一次，本次数据更新时间：<span v-if="updateTime">{{$moment(updateTime).format('HH:mm:ss')}}</span></div>
    </div>

    <!-- 未接入视频监控的项目弹窗 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
        <div style="width: 800px; height: 520px; overflow: hidden;">
          <zz-table
            style="margin: 0 -20px 0"
            :title="dialogTableTitle"
            :dataList = 'detailDataList'>
          </zz-table>
          <zz-paginate pagingId="page2" v-if="detailDataList.length > 0" :simple="false" :isTotalItem="false" pageSize = 10 @choose="detailQuery" :padding="[0]" class="right"></zz-paginate>
          <div class="exportExcel">
            <button class="mr10 button-block" @click="exportNoMonitorExcel()">导出Excel</button>
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getEntryVideoListByProject, getNoAccessProjectCount, getNoAccessProjectList } from '../../../service/api.js'

export default {
    name: 'areavideomonitor',
    components: {
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        sortList: {
          1: '按摄像头数量升序',
          2: '按摄像头数量降序'
        },
        dataList: [],
        detailDataList: [],
        title: [
          {name: '区域名称', width: '25%', align: 'left'},
          {name: '项目名称', width: '25%', align: 'left'},
          {name: '摄像头数量', width: '15%', align: 'left'},
          {name: '预警抓拍记录', width: '10%', align: 'left'},
          {name: '报警抓拍记录', width: '10%', align: 'left'},
          {name: '操作', width: '15%', align: 'left'}
        ],
        showDialog: false,
        dialogTitle: '未接入视频监控的项目',
        dialogTableTitle: [
          {name: '序号', width: '11%', align: 'left'},
          {name: '项目名称', width: '20%', align: 'left'},
          {name: '区域', width: '15%', align: 'left'},
          {name: '项目负责人', width: '22%', align: 'left'},
          {name: '上线智慧工地时间', width: '22%', align: 'left'}
        ],
        checkStatus: false,
        chooseArea: '',
        department: null,
        departmentname: '',
        projectSort: 1,
        page: 1,
        pageNum: 10,
        videoCount: {
          accessCount: 0,
          noAccessCount: 0
        },
        noAccessPage: 1,
        defaultNum: 1,
        updateTime: ''
      }
    },
    mounted () {
      this.areaCode = this.$route.query.id
      this.departmentname = this.$route.query.name
      this.searchByProject()
      this.getNoAccesspList()
    },
    methods: {
      changeSortFun (item) {
        this.projectSort = item.key
        this.searchByProject()
        // 升降序修改
      },
      searchClick (item) {
        //console.log(item)
        this.chooseArea = item
        this.searchByProject()
        // 搜索项目
      },
      query (item) {
        // 获取对应页数据
        this.page = item
        this.searchByProject()
      },
      detailQuery (item) {
        // 未接入视频项目弹层的获取对应页数据
        this.noAccessPage = item
        this.getNoAccessDetailList()
      },
      // 获取企业级的视频监测数据
      searchByProject () {
        this.dataList = []
        let data = {
          // 'departmentId': this.chooseArea,
          'areaCode': this.areaCode,
          'projectName': this.chooseArea,
          'isAi': this.checkStatus,
          'sort': this.projectSort,
          // 'page': this.page,
          'pageNum': this.pageNum
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByProject`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page1',
          }).then(res => {
            if (res.data.data && res.data.data.dataList) {
              this.dataList = res.data.data.dataList
              if (res.data.data.dataList.length > 0) {
                this.updateTime = res.data.data.dataList[0].updateTime
              }
            } else {
              this.dataList = []
              this.updateTime = ''
            }
          })
        // 按项目查询
      },
      // 查看详情
      tableHandler (data) {
        this.gopage('/videoMonitor/projectVideo', data.projectId, data.projectName)
      },
      // 是否只查看有智能抓拍的项目
      handleChange (status) {
        this.checkStatus = status
        this.searchByProject()
      },
      getNoAccesspList() {
        // 按项目查找时获取未接入视频监控项目数据
        getNoAccessProjectCount({
          departmentId: '',
          areaCode: this.areaCode
        }).then( res => {
          this.videoCount = {
            hasAi: res.data.accessCount,
            noAi: res.data.noAccessCount
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取未接入视屏监控项目的列表
      getNoAccessDetailList () {
        let data = {
          // 'departmentId': this.chooseArea,
          'areaCode': this.areaCode,
          'projectName': this.chooseArea,
          'isAi': this.checkStatus,
          'sort': this.projectSort,
          // 'page': this.noAccessPage,
          // 'pageNum': this.pageNum
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/enterpriseWebVideoController/getNoAccessProjectList`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page2',
          }).then(res => {
            if (res.data.data && res.data.data.dataList) {
              this.noAccessPage = res.data.data.pageNum
              this.defaultNum = 1
              let now = (new Date()).getTime()
              this.detailDataList = res.data.data.dataList
              this.detailDataList = this.detailDataList.map(item => {
                return {
                  defaultNum: (this.noAccessPage - 1) * 10 + this.defaultNum++,
                  projectTitle: item.projectTitle || '--',
                  departmentName: item.departmentName || '--',
                  memberName: item.memberName || '--',
                  gmtCreate: {customize: `<span class='left'>${this.$moment(item.longGmtCreate).format('YYYY-MM-DD')}</span><span class='right'>已${Math.floor((now-item.longGmtCreate)/(1000*60*60*24))}天</span>`} //(this.$moment(item.longGmtCreate).format('YYYY-MM-DD') + " 已"+ Math.floor((now-item.longGmtCreate)/(1000*60*60*24)) +"天") || '--'
                }
              })
            } else {
              this.detailDataList = []
            }
          })
      },
      // 查看未接入视屏监控项目列表
      notAiList() {
        this.showDialog = true
        this.getNoAccessDetailList()
      },
      gopage (url, idnum, pname) {
        this.$router.push({ path: url, query: { id: idnum, name: pname }})
      },
      getInfoByProjectQuery () {
        return {
          //departmentId: this.chooseArea,
          areaCode: this.areaCode,
          projectName: this.chooseArea,
          isAi: this.checkStatus,
          sort: this.projectSort,
          pageNum: this.pageNum
        }
      },
      getNoMonitorListQuery () {
        return {
          areaCode: this.areaCode,
          projectName: this.chooseArea,
          isAi: this.checkStatus,
          sort: this.projectSort,
        }
      },
      exportExcel () {
        this.$export(`${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByProjectAsExcel`, this.getInfoByProjectQuery())
      },
      exportNoMonitorExcel () {
        this.$export(`${this.$site.videoServer}/api/enterpriseWebVideoController/getNoAccessProjectListAsExcel`, this.getNoMonitorListQuery())
      },
      close () {
        this.defaultNum = 1
        this.showDialog = false
      }
    }
}
</script>
<style lang="scss" scoped>
.environment-header{
    height: 60px;
    line-height: 30px;
    padding: 15px 20px 17px 20px;
    box-sizing: border-box;
    border-bottom: 1px $color-line solid;
    position: relative;
    .head-right {
      position: absolute;
      right: 20px;
      z-index: 6;
    }
  }
  .top-right {
    padding: 20px 20px 10px 20px;
    height: 30px;
    line-height: 30px;
    z-index: 6;
    span {
      line-height: 30px;
    }
  }
  .mainsec {
    //width: 100%;
    padding: 0 20px;
  }
  .main-table {
    border: 1px #e2eaee solid;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    tr {
        height: 40px;
        text-align:left;
      }
      tr:nth-child(odd) {
        background: #fcfcfc;
      }
      tr:nth-child(even) {
        background: #fff;
      }
      th {
        background: #eef1f1;
        color:#363c3c;
        font-weight: 400;
        font-size: 14px;
        border: 1px solid #e5e6e8;
        padding-left: 20px;
        text-align:left;
      }
      td {
        font-size: 14px;
        border: 1px #e2eaee solid;
        border-bottom: none;
        border-top: none;
        padding: 0 20px;
        text-align: left;
        i {
          color:$color;
        }
      }
      .detail {
        color: $color;
      }
      .nodate {
        td {
          text-align: center;
          i {
            color: $color;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
      }
      .alignRight {
        text-align: right;
      }
  }
  .info {
    padding: 20px 20px 0 20px;
    height: 30px;
    line-height: 30px;
    >div {
      font-size: 14px;
      color: #363c3c;
      display: inline-block;
      span {
        color: #22a6b5;
        font-weight: bold;
        display: inline-block;
        padding: 0 10px;
      }
    }
    >div:last-child {
      span {
        padding: 0 0 0 10px;
      }
    }
  }
  .exportExcel {
    div {
      line-height: 30px;
      display: inline-block;
      color: #939997;
    }
  }
</style>

